<!-- 新增/编辑用户信息弹框 -->
<template>
  <!-- 添加或修改角色配置对话框 -->
  <el-dialog :title="title" :loading="loading" v-model="visible" width="500px" append-to-body :before-close="cancel">
    <el-form ref="userRef" :model="form" :rules="rules" label-width="100px" :validate-on-rule-change="false">
      <el-form-item label="用户编号" prop="id" v-if="type === 'edit'">
        <el-input v-model="form.id" disabled />
      </el-form-item>
      <el-form-item label="用户名" prop="user_name">
        <el-input v-model="form.user_name" placeholder="请输入用户名" />
      </el-form-item>
      <el-form-item label="用户昵称" prop="nick_name">
        <el-input v-model="form.nick_name" placeholder="请输入用户昵称" />
      </el-form-item>
      <el-form-item
        label="密码"
        prop="password"
        v-if="type === 'add'"
        :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]"
      >
        <el-input v-model="form.password" type="password" placeholder="请输入密码" />
      </el-form-item>
      <el-form-item label="账户启用状态" prop="status">
        <el-radio-group v-model="form.status">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="用户类型" prop="type">
        <el-select v-model="form.type" placeholder="请选择" style="width: 100%">
          <el-option v-for="dict in userTypeList" :key="dict.value" :value="dict.value" :label="dict.label" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup name="UserDialog">
import { getOptionsList } from "@/api/common";
import { addUser, editUser } from "@/api/system/user";
const { proxy } = getCurrentInstance();
const props = defineProps({
  rowInfo: {
    type: Object,
    default: () => {}
  }
});
const emits = defineEmits(["success"]);
const type = ref("");
const title = ref("");
const visible = defineModel(false);
const loading = ref(false);
const userTypeList = ref([]);
const form = reactive({
  user_name: "",
  nick_name: "",
  type: "",
  id: -1,
  status: "",
  password: ""
});
const rules = reactive({
  user_name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  nick_name: [{ required: true, message: "请输入用户昵称", trigger: "blur" }],
  type: [{ required: true, message: "请选择用户类型", trigger: "change" }]
});

watch(
  () => props.rowInfo,
  () => {
    if (props.rowInfo.id) {
      setUserInfo(props.rowInfo);
      type.value = "edit";
      title.value = "修改用户";
    } else {
      type.value = "add";
      title.value = "新增用户";
    }
  },
  { immediate: true }
);

getTypeList();

async function getTypeList() {
  const res = await getOptionsList({ dict_type: "USER_TYPE" });
  if (res.code === 0) {
    userTypeList.value = res.data;
  }
}
async function setUserInfo(data) {
  Object.keys(form).forEach((key) => {
    form[key] = data[key] === 0 ? 0 : data[key] || "";
  });
  form.type = `${form.type}`;
}
function cancel() {
  visible.value = false;
}
async function submitForm() {
  const reqObj = {
    add: { api: addUser, msg: "新增成功" },
    edit: { api: editUser, msg: "修改成功" }
  };
  const nowReq = reqObj[type.value];

  proxy.$refs["userRef"].validate(async (valid) => {
    if (!valid) return;
    const { id, user_name, nick_name, password, status } = form;
    const params = { user_name, nick_name, type: Number(form.type) };
    if (type.value === "add") {
      params.password = password;
    }
    if (type.value === "edit") {
      params.id = id;
      params.status = status;
    }
    const res = await nowReq.api(params);
    if (res.code === 0) {
      proxy.$modal.msgSuccess(nowReq.msg);
      emits("success", type);
      cancel();
      return;
    }
    proxy.$modal.msgError(res.message);
  });
}
</script>
